<template>
  <div id="main">
    <el-form
      :model="teacher"
      :rules="rules"
      ref="teacher"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="教师姓名"
        prop="name"
        placeholder="请输入教师姓名"
        width="200"
      >
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item
        label="教师学位"
        prop="degree"
        placeholder="请输入教师学位"
        width="200"
      >
        <el-input v-model="teacher.degree"></el-input>
      </el-form-item>
      <el-form-item
        label="所属院系"
        prop="academy"
        placeholder="请输入教师所属院系"
        width="200"
      >
        <el-input v-model="teacher.academy"></el-input>
      </el-form-item>
      <el-form-item
        label="教师职称"
        prop="professional"
        placeholder="请输入教师职称"
        width="200"
      >
        <el-input v-model="teacher.professional"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="教师邮箱" placeholder="请输入教师邮箱">
        <el-input v-model="teacher.email"></el-input>
      </el-form-item>
      <el-form-item label="个人经历" prop="experience">
        <el-input type="textarea" v-model="teacher.experience"></el-input>
      </el-form-item>
      <el-form-item label="个人头像" prop="avatar">
        <el-upload
          class="avatar-uploader"
          :action="teacher.ITEMS_IMG_UPLOAD"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img v-if="teacher.avatar" :src="teacher.imgsrcip + teacher.avatar" class="avatar" style="width:90px;height:90px"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('teacher')"
          >立即添加</el-button
        >
        <el-button @click="resetForm('teacher')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addteacher, ITEMS_IMG_UPLOAD,imgsrcip} from "@/api/apis";
export default {
  data() {
    return {
      teacher: {
        name: "",
        degree: "",
        avataracademy: "",
        professional: "",
        email: "",
        experience: "",
        // imageUrl: "", //头像上传
        avatar:'',
        ITEMS_IMG_UPLOAD: "",
        imgsrcip:''
      },
      rules: {
        name: [
          { required: true, message: "请输入教师姓名", trigger: "blur" },
        ],
        degree: [
          { required: true, message: "请输入教师学位", trigger: "blur" },
        ],
        academy: [
          { required: true, message: "请输入教师所属院系", trigger: "blur" },
        ],
        professional: [
          { required: true, message: "请输入教师职称", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        experience: [
          { required: true, message: "请输入个人经历", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(teacher) {
         this.$refs[teacher].validate((valid) => {
          if (valid) {
      this.teacher.academy = this.teacher.academy;
      this.teacher.avatar = this.teacher.avatar;
      this.teacher.degree = this.teacher.degree;
      this.teacher.email = this.teacher.email;
      this.teacher.experience = this.teacher.experience;
      this.teacher.name = this.teacher.name;
      this.teacher.professional = this.teacher.professional;
      // console.log(this.teacher);
      addteacher(this.teacher).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "教师添加成功!",
          });
          this.$router.push("/main/facultylist");
        } else {
          this.$message({
            type: "error",
            message: "请稍后再试!",
          });
        }
      });
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
   
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res) {
      // console.log(res);
      // console.log(res.code);
      // console.log(res.data);
      if (res.code == 200) {
        this.teacher.avatar = res.data
      }
    }
  },
  created() {
    this.teacher.ITEMS_IMG_UPLOAD = ITEMS_IMG_UPLOAD;
    this.teacher.imgsrcip=imgsrcip
  },
};
</script>
<style scoped >
#main {
  width: 500px;
  padding-left: 10px;
}
#main > form > div:nth-child(7) > div > el-upload > i {
  border: 1px dashed #8c939d;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  border: 1px dashed #8c939d;
  width: 90px;
  height: 90px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 90px;
  height: 90px;
  display: block;
}
</style>

